<template>
	<view class="detail-container">
		<!-- 民宿详情导航栏组件 -->
		<house-detail-nav-bar 
			:nav-opacity="navOpacity"
			:title="title"
			:nav-list="navList"
			:current-nav="currentNav"
			:show-collection-button="true"
			:show-share-button="true"
			:show-nav-tabs="true"
			@nav-height="onNavHeightChange"
			@go-back="onGoBack"
			@collection="handleCollection"
			@share="handleShare"
			@nav-change="switchNav"
		/>

		<!-- 使用封装的房源信息组件 -->
		<house-info :images="bannerList" :title="title" :primary-tag="room.tag" :primary-tag-desc="room.tag"
			:tags="infoTags" :location-name="room.location.address" :distance-value="room.location.distanceValue"
			:address="room.location.address" :latitude="room.location.latitude || 26.5783" 
			:longitude="room.location.longitude || 106.7135" :place-name="title"></house-info>

		<!-- 入住退房日期信息 -->
		<house-date-info 
			:check-in-date="checkInDate" 
			:check-out-date="checkOutDate"
			:house-image="houseDisplayImage"
			:house-title="houseDisplayTitle"
			:house-features="houseDisplayFeatures"
			:house-size="houseDisplaySize"
			:price="room.price || '258'"
		></house-date-info>

		<!-- 房屋特色 -->
		<view class="card">
			<view class="feature-section">
				<view class="section-title">房屋特色</view>
				<view class="feature-reason">
					<text class="reason-tag">推荐理由:</text>
					<text class="reason-text">{{ room.recommendReason }}</text>
				</view>

				<!-- 落地窗 -->
				<view class="feature-item">
					<view class="feature-title">落地窗{{ room.title }}</view>
					<text class="feature-desc">观蓝天白云</text>
					<image v-for="item in room.windowImages" :src="item" class="feature-img" mode="aspectFill"></image>
				</view>

				<!-- 免费停车 -->
				<view class="feature-item">
					<view class="feature-title">免费停车</view>
					<text class="feature-desc">有免费停车场</text>
					<image v-for="item in room.parkingImages" :src="item" class="feature-img" mode="aspectFill"></image>
				</view>
			</view>
		</view>

		<!-- 服务设施 -->
		<view class="card">
			<view class="section-title">服务设施</view>
			<house-facilities :facilities="facilitiesData" @view-all="viewAllFacilities">
			</house-facilities>
		</view>

		<!-- 房东介绍 -->
		<view class="card">
			<view class="landlord-section">
				<view class="section-title">房东介绍</view>
				<view class="landlord-card">
					<view class="landlord-info">
						<image src="https://i.ibb.co/4nCycMQJ/image.png" class="landlord-avatar"></image>
						<view class="landlord-detail">
							<view class="landlord-name">{{room.landlord.name}}</view>
							<view class="landlord-desc">{{room.landlord.description}}</view>
						</view>
					</view>
					<view class="contact-btn" @click="telphone(room.landlord.contact)">联系房东</view>
				</view>
				<view class="landlord-stats">
					<view class="stat-item">
						<view class="stat-num">100%</view>
						<view class="stat-label">好评率</view>
						<view class="stat-count">共107条点评</view>
					</view>
					<view class="stat-item">
						<view class="stat-num">100%</view>
						<view class="stat-label">订单确认率</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 房客点评 -->
		<view class="card">
			<view class="review-section">
				<view class="section-title">房客点评</view>
				<view class="review-stats">
					<view class="total-score">
						<text class="big-score">5.0</text>
						<text class="score-tag">超棒</text>
					</view>
					<view class="score-detail">
						<view class="score-item">
							<text>描述 4.9</text>
						</view>
						<view class="score-item">
							<text>位置 5.0</text>
						</view>
						<view class="score-item">
							<text>便捷 5.0</text>
						</view>
						<view class="score-item">
							<text>服务 5.0</text>
						</view>
						<view class="score-item">
							<text>卫生 5.0</text>
						</view>
						<view class="score-item">
							<text>性价比 5.0</text>
						</view>
					</view>
				</view>

				<!-- 评价列表 -->
				<view class="review-list">
					<view class="review-item">
						<view class="reviewer-info">
							<image src="https://i.ibb.co/4nCycMQJ/image.png" class="reviewer-avatar"></image>
							<view class="reviewer-name">j***5</view>
							<view class="review-date">2025-03-01入住</view>
						</view>
						<view class="review-content">
							酒店特别好，服务很好，离海边很近，还有下午茶
						</view>
						<view class="review-images">
							<image src="https://i.ibb.co/8y5RYXG/image.png" class="review-img"></image>
							<image src="https://i.ibb.co/gbNjKzb2/image.png" class="review-img"></image>
						</view>
					</view>
				</view>
				<view class="view-all-reviews">全部11条 ></view>
			</view>
		</view>

		<!-- 费用须知 -->
		<view class="card">
			<view class="fee-notice">
				<view class="section-title">费用须知</view>
				<text class="notice-tip">以下规则由房东制定，请仔细阅读并遵守</text>
				<view class="notice-items">
					<view class="notice-item" v-for="item in room.noticeRules">
						<view class="notice-item-title">{{item.name}}</view>
						<view class="notice-item-content">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 价格说明 -->
		<view class="card">
			<view class="price-description">
				<view class="section-title">价格说明</view>
				<view class="price-content">
					{{room.priceNotice}}
				</view>
			</view>
		</view>

		<!-- 地图图片（用图片代替） -->
		<view class="card">
			<view class="map-section">
				<view class="section-title">位置</view>
				<view class="map-container" @click="openMap">
					<image :src="room.mainImages && room.mainImages.length > 0 ? room.mainImages[0] : '/static/images/default-map.png'" class="map-image"></image>
					<view class="map-overlay">
						<view class="map-info">
							<view class="map-address">{{ room.location && room.location.address ? room.location.address : '查看地图位置' }}</view>
							<view class="map-action">
								<uni-icons type="map-pin-ellipse" size="16" color="#00A3FF"></uni-icons>
								<text>点击查看地图</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 周边相似房屋 - 已隐藏 -->
		<!-- <house-other-rooms :room-list="similarList" @room-click="onRoomClick"></house-other-rooms> -->

		
		<!-- 底部预订栏 -->
		<houseBookBar :check-in-date="checkInDate" :check-out-date="checkOutDate" :price="room.price"
			@book-now="goToBooking" @contact-host="contactHost" @date-change="onDateChange"></houseBookBar>
	</view>
</template>

<script>
	import houseInfo from '@/components/houseInfo/index.vue'
	import houseBookBar from '@/components/houseBookBar/index.vue'
	import houseFacilities from '@/components/houseFacilities/index.vue'
	import houseOtherRooms from '@/components/houseOtherRooms/index.vue'
	import houseDateInfo from '@/components/houseDateInfo/index.vue'
	import houseDetailNavBar from '@/components/houseDetailNavBar/index.vue'
	import { mapGetters } from 'vuex';
	import {
		getStoreRoomDetail
	} from '@/api/store.js';

	export default {
		components: {
			houseInfo,
			houseBookBar,
			houseFacilities,
			houseOtherRooms,
			houseDateInfo,
			houseDetailNavBar
		},
		data() {
			return {
				bannerList: [],
				navList: ['概览', '房源', '点评', '设施', '房东', '须知'],
				currentNav: 0,
				navOpacity: 0,
				scrollTop: 0,
				navBarHeight: 0, // 导航栏高度，由组件传入
				// 房源信息组件标签数据
				infoTags: [],
				// 设施数据
				facilitiesData: {
					service: [{
							name: '免费停车位',
							available: true
						},
						{
							name: '付费停车位',
							available: true
						},
						{
							name: '行李寄存',
							available: false
						}
					],
					basic: [{
							name: '无线网络',
							available: true
						},
						{
							name: '电梯',
							available: false
						},
						{
							name: '窗户',
							available: true
						}
					],
					bathroom: [{
							name: '热水',
							available: true
						},
						{
							name: '独立卫浴',
							available: true
						},
						{
							name: '电吹风',
							available: true
						}
					]
				},
				similarList: [

				],
				id: 0,
				room: {
					bookingDate: [] // 初始化为空数组，避免访问 undefined[0] 的错误
				},
				title: '',
			};
		},
		computed: {
			...mapGetters(['isLogin', 'uid', 'keyColor', 'viewColor', 'cartNum', 'location']),
			checkInDate() {
				if (this.room && this.room.bookingDate && this.room.bookingDate.length > 0) {
					return this.room.bookingDate[0];
				}
				return '';
			},
			checkOutDate() {
				if (this.room && this.room.bookingDate && this.room.bookingDate.length > 1) {
					return this.room.bookingDate[1];
				}
				return '';
			},
			houseDisplayImage() {
				// 优先使用房源的主图片，如果没有则使用村旅-民宿图.md中的默认图片
				if (this.bannerList && this.bannerList.length > 0) {
					return this.bannerList[0];
				}
				return 'https://cdn.zhzfpn.cn/PicGo/20250905094504240.jpg';
			},
			houseDisplayTitle() {
				return this.title || '归田园居（大床）';
			},
			houseDisplayFeatures() {
				return '1室1卫大床2人 整套 30m² 2层整套 取消政策灵活';
			},
			houseDisplaySize() {
				return '12小时内确认';
			}
		},
		onLoad(options) {
			this.id = options.id;
			// 直接获取房间详情，无需登录验证
			this.getStoreRoomDetail();
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop;
			this.scrollTop = scrollTop;

			// 导航栏渐变显示逻辑，初始透明，滚动时逐渐显示
			if (scrollTop < 50) {
				this.navOpacity = 0;
			} else if (scrollTop < 200) {
				this.navOpacity = scrollTop / 200;
			} else {
				this.navOpacity = 1;
			}
		},
		methods: {
			telphone(phone) {
				console.log(phone)
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				})
			},
			getStoreRoomDetail() {
				getStoreRoomDetail(this.id).then(res => {
					this.room = res.data;
					this.title = res.data.title;
					this.bannerList = res.data.mainImages;
					this.infoTags = res.data.tags;
					this.facilitiesData.service = res.data.serviceFacilities;
					this.facilitiesData.basic = res.data.basicFacilities;
					this.facilitiesData.bathroom = res.data.bathroomFacilities;
					// this.similarList = res.data.similarList; // 已隐藏推荐模块
					
					// 确保 bookingDate 有默认值，避免日期选择器显示问题
					if (!this.room.bookingDate || !Array.isArray(this.room.bookingDate) || this.room.bookingDate.length < 2) {
						const today = new Date();
						const tomorrow = new Date(today);
						tomorrow.setDate(today.getDate() + 1);
						
						// 格式化为 YYYY-MM-DD 格式
						const formatDate = (date) => {
							const year = date.getFullYear();
							const month = String(date.getMonth() + 1).padStart(2, '0');
							const day = String(date.getDate()).padStart(2, '0');
							return `${year}-${month}-${day}`;
						};
						
						// 使用Vue.set确保响应式更新
						this.$set(this.room, 'bookingDate', [formatDate(today), formatDate(tomorrow)]);
						console.log('设置默认日期:', this.room.bookingDate);
					} else {
						console.log('使用API返回的日期:', this.room.bookingDate);
					}

				});
			},
			// 导航栏高度变化回调
			onNavHeightChange(height) {
				this.navBarHeight = height;
				console.log('导航栏高度:', height);
			},
			
			// 导航栏返回按钮回调
			onGoBack() {
				console.log('导航栏返回按钮被点击');
				// 可以在这里处理自定义返回逻辑
			},
			switchNav(index) {
				this.currentNav = index;
				console.log('切换到导航标签:', index, this.navList[index]);
			},
			goBack() {
				uni.navigateBack();
			},
			goToBooking() {
				console.log('123')
				uni.navigateTo({
					url: `/pages/house/details/order_confirm?room_id=` + this.room.id
				});
			},
			contactHost() {
				uni.showToast({
					title: '功能开发中...',
					icon: 'none'
				});
			},
			viewAllFacilities() {
				// 实现查看所有设施的逻辑
				console.log('查看所有设施');
			},
			// onRoomClick(item) {
			// 	console.log('room-click', item);
			// 	uni.showToast({
			// 		title: `点击了: ${item.title}`,
			// 		icon: 'none'
			// 	});
			// },
			onDateChange(data) {
				// 处理日期变更
				if (data && data.startDate && data.endDate) {
					// 使用Vue.set确保响应式更新
					this.$set(this.room, 'bookingDate', [data.startDate, data.endDate]);
					console.log('日期已更新:', this.room.bookingDate);
				}
			},
			testDateChange() {
				// 测试日期变更功能
				const tomorrow = new Date();
				tomorrow.setDate(tomorrow.getDate() + 1);
				const dayAfter = new Date();
				dayAfter.setDate(dayAfter.getDate() + 3);
				
				const formatDate = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0');
					const day = String(date.getDate()).padStart(2, '0');
					return `${year}-${month}-${day}`;
				};
				
				this.$set(this.room, 'bookingDate', [formatDate(tomorrow), formatDate(dayAfter)]);
				console.log('测试日期更新:', this.room.bookingDate);
			},
			handleCollection() {
				// 收藏功能
				uni.showToast({
					title: '收藏功能开发中...',
					icon: 'none'
				});
			},
			handleShare() {
				// 分享功能
				uni.showToast({
					title: '分享功能开发中...',
					icon: 'none'
				});
			},
			openMap() {
				// 参考景区详情页面的地图跳转逻辑
				if (this.room && this.room.location) {
					// 如果有具体的经纬度信息，使用实际坐标
					const latitude = this.room.location.latitude || 26.5783; // 默认贵州贵阳坐标
					const longitude = this.room.location.longitude || 106.7135;
					const name = this.title || '民宿位置';
					const address = this.room.location.address || '查看详细位置';
					
					uni.openLocation({
						latitude: parseFloat(latitude),
						longitude: parseFloat(longitude),
						name: name,
						address: address,
						success: function() {
							console.log('打开地图成功');
						},
						fail: function(err) {
							console.error('打开地图失败:', err);
							uni.showToast({
								title: '打开地图失败',
								icon: 'none'
							});
						}
					});
				} else {
					uni.showToast({
						title: '暂无位置信息',
						icon: 'none'
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.detail-container {
		width: 100%;
		background-color: #fff;
		padding-bottom: 140rpx;
		position: relative;
	}

	/* 通用卡片样式 */
	.card {
		background-color: #fff;
		margin: 0 30rpx 20rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	/* 轮播图样式 */


	.slide-image {
		width: 100%;
		height: 100%;
	}

	/* 导航栏样式已移至 houseDetailNavBar 组件 */

	/* 基本信息区域 */
	.info-section {
		margin-top: 20rpx;
		padding: 30rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 34rpx;
		font-weight: bold;
		line-height: 1.4;
		margin-bottom: 20rpx;
	}

	.tags {
		margin-bottom: 20rpx;
	}

	.tag-group {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.tag {
		background-color: rgba(255, 107, 53, 0.1);
		color: #ff6b35;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		margin-right: 10rpx;
	}

	.tag-text {
		font-size: 24rpx;
		color: #666;
	}

	.tag-line {
		display: flex;
		flex-wrap: wrap;
	}

	.tag-item {
		border: 1px solid #e5e5e5;
		padding: 6rpx 16rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		color: #333;
	}

	.score-line {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.score {
		display: flex;
		align-items: center;
	}

	.score-num {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff6b35;
	}

	.score-text {
		font-size: 28rpx;
		color: #ff6b35;
		margin-left: 10rpx;
	}

	.score-count {
		font-size: 24rpx;
		color: #999;
		margin-left: 10rpx;
	}

	.location {
		font-size: 26rpx;
		color: #666;
	}

	.address {
		font-size: 26rpx;
		color: #666;
		display: flex;
		justify-content: space-between;
	}

	.map-link {
		color: #4a90e2;
	}

	/* 房屋特色样式已内联到card中 */

	.section-title {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.feature-reason {
		background-color: rgba(255, 237, 220, 0.6);
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
	}

	.reason-tag {
		font-size: 26rpx;
		color: #ff6b35;
		margin-right: 10rpx;
	}

	.reason-text {
		font-size: 26rpx;
		color: #333;
	}

	.feature-item {
		margin-bottom: 30rpx;
	}

	.feature-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.feature-desc {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 20rpx;
	}

	.feature-img {
		width: 100%;
		height: 300rpx;
		border-radius: 10rpx;
	}

	/* 服务设施样式已内联到card中 */

	.service-group {
		margin-bottom: 30rpx;
	}

	.service-group-title {
		font-size: 30rpx;
		font-weight: 500;
		margin-bottom: 20rpx;
		color: #333;
	}

	.service-items {
		display: flex;
		flex-wrap: wrap;
	}

	.service-item {
		width: 33.33%;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		margin-bottom: 20rpx;
		color: #333;
		line-height: 1;
	}

	.view-all {
		text-align: right;
		font-size: 26rpx;
		color: #999;
		padding: 10rpx 0;
		margin-top: 10rpx;
	}

	.arrow-icon {
		font-size: 24rpx;
		margin-left: 6rpx;
	}

	.icon-container {
		width: 36rpx;
		height: 36rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
		flex-shrink: 0;
	}

	.check-icon {
		width: 36rpx;
		height: 36rpx;
		display: block;
	}

	/* 房东介绍样式已内联到card中 */

	.landlord-card {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.landlord-info {
		display: flex;
		align-items: center;
	}

	.landlord-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.landlord-name {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.landlord-desc {
		font-size: 24rpx;
		color: #666;
	}

	.contact-btn {
		background-color: #ff6b35;
		color: #fff;
		padding: 10rpx 30rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
	}

	.landlord-stats {
		display: flex;
	}

	.stat-item {
		flex: 1;
		text-align: center;
	}

	.stat-num {
		font-size: 34rpx;
		font-weight: bold;
	}

	.stat-label {
		font-size: 24rpx;
		color: #666;
	}

	.stat-count {
		font-size: 22rpx;
		color: #999;
	}

	/* 房客点评样式已内联到card中 */

	.review-stats {
		display: flex;
		margin-bottom: 30rpx;
	}

	.total-score {
		width: 180rpx;
		text-align: center;
		margin-right: 30rpx;
	}

	.big-score {
		font-size: 60rpx;
		font-weight: bold;
		color: #ff6b35;
	}

	.score-tag {
		font-size: 26rpx;
		color: #ff6b35;
	}

	.score-detail {
		flex: 1;
		display: flex;
		flex-wrap: wrap;
	}

	.score-item {
		width: 50%;
		font-size: 26rpx;
		margin-bottom: 10rpx;
		color: #666;
	}

	.review-item {
		margin-bottom: 30rpx;
	}

	.reviewer-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.reviewer-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.reviewer-name {
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.review-date {
		font-size: 24rpx;
		color: #999;
	}

	.review-content {
		font-size: 28rpx;
		line-height: 1.6;
		margin-bottom: 20rpx;
	}

	.review-images {
		display: flex;
	}

	.review-img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.view-all-reviews {
		text-align: right;
		font-size: 26rpx;
		color: #999;
	}

	/* 费用须知样式已内联到card中 */

	.notice-tip {
		font-size: 24rpx;
		color: #999;
		margin-bottom: 20rpx;
		display: block;
	}

	.notice-items {
		margin-bottom: 20rpx;
	}

	.notice-item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
		align-items: center;
	}

	.notice-item-title {
		width: 80rpx;
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.notice-item-content {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		padding-left: 20rpx;
	}

	.view-all-notice {
		text-align: right;
		font-size: 26rpx;
		color: #999;
		padding: 10rpx 0;
		margin-top: 10rpx;
	}

	.arrow-icon {
		font-size: 24rpx;
		margin-left: 6rpx;
	}

	/* 价格说明样式已内联到card中 */

	.price-content {
		font-size: 24rpx;
		color: #999;
		line-height: 1.6;
	}

	/* 地图区域样式已内联到card中 */

	.map-container {
		position: relative;
		width: 100%;
		height: 400rpx;
		border-radius: 10rpx;
		overflow: hidden;
		cursor: pointer;
		
		&:active {
			opacity: 0.8;
		}
	}

	.map-image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		object-fit: cover;
	}

	.map-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
		padding: 30rpx 20rpx 20rpx;
	}

	.map-info {
		color: white;
	}

	.map-address {
		font-size: 28rpx;
		font-weight: 500;
		margin-bottom: 8rpx;
		line-height: 1.4;
	}

	.map-action {
		display: flex;
		align-items: center;
		gap: 6rpx;
		font-size: 24rpx;
		opacity: 0.9;
		
		text {
			color: #00A3FF;
		}
	}

	/* 底部预订栏 */
	.bottom-bar {
		position: fixed;
		bottom: -100rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		z-index: 100;
	}

	.price-number {
		display: flex;
		align-items: flex-end;
	}

	.price-value {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff6b35;
	}

	.price-original {
		font-size: 26rpx;
		color: #999;
		text-decoration: line-through;
		margin-left: 10rpx;
	}

	.price-desc {
		font-size: 22rpx;
		color: #ff6b35;
	}

	.book-btn {
		background-color: #ff6b35;
		color: #fff;
		padding: 15rpx 40rpx;
		border-radius: 40rpx;
		font-size: 30rpx;
	}

	.icon-container {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
		flex-shrink: 0;
	}

	/* 房源标签样式 */
	.house-tags {
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx;
		background-color: #fff;
	}

	.house-tags .tag-item {
		height: 60rpx;
		padding: 0 20rpx;
		margin: 10rpx;
		border-radius: 8rpx;
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 26rpx;
		color: #333;
	}

	/* 评分和地址信息样式 */
	.rating-location {
		background-color: #fff;
		padding: 0 20rpx 20rpx;
	}

	.rating-container {
		padding: 20rpx 0;
		border-bottom: 1px solid #f5f5f5;
	}

	.rating {
		display: flex;
		align-items: center;
	}

	.star-icon {
		color: #FF5A5F;
		font-size: 32rpx;
		margin-right: 10rpx;
	}

	.rating-num {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.rating-count {
		color: #666;
		font-size: 28rpx;
	}

	.right-arrow {
		margin-left: 10rpx;
		color: #999;
	}

	.user-comment {
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
	}

	.location-container {
		padding: 20rpx 0;
		position: relative;
	}

	.location-text {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.address {
		font-size: 26rpx;
		color: #666;
		width: 80%;
	}

	.map-btn {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		align-items: center;
		color: #4A90E2;
		font-size: 26rpx;
	}

	.map-icon {
		margin-right: 5rpx;
	}
</style>